/**
 * @description  : 字典多选组件
 * @descriptionDetail : 字典多选组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-04 19:10:06
 */
<template>
  <view class="multi-page">
    <theme-navbar
      :isBack="false"
      :is-white="false"
      :title="title"
    >
      <view class="nav-right-icon" @click="handlerConfirm">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <u-row
        class="credit-container"
        v-for="(item, idx) in options"
        :key="idx"
        @tap="handlerSelectItem(item)"
      >
        <u-col span="10" style="padding-right:0;">
          <view class="title" style="text-align:left;">
            {{ item.bcbName }}
          </view>
        </u-col>
        <u-col span="2" style="text-align:right;">
          <u-icon
            name="checkbox-mark"
            color="#2979ff"
            size="32"
            v-if="selectedUids.includes(item.bcbCode)"
          ></u-icon>
        </u-col>
        <!-- <u-divider color="#fa3534" half-width="100%"></u-divider> -->
      </u-row>
    </view>
  </view>
</template>

<script>
export default {
  name: "DicMultiChoice",
  props: {
    defaultUids: {   // 已选中的uid
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '请选择',
    },
    keyWord:{
      type: String,
      default: '',
    },
    otherLogic:{  // 在多选过程中是否存在选项互斥等特殊情况
      type: Boolean,
      default: false,
    },
    logicFun:{ // 选项互斥逻辑
      type:Function,
      default:undefined,
    },
  },
  data() {
    return {
      options:[], // 字典数组
      oldKey:"", // 上一个keyWord
      selectedUids: [],     // 选中项的ids
      selectedItems: [],     // 选中项
    };
  },
  created() {
    if(this.oldKey != this.keyWord){
      this.$u.dic.getDicByKey(this.keyWord).then(
        (res) => {
          this.oldKey = this.keyWord;
          this.options = [...res].sort((a, b) => a.value - b.value);
          this.updateDefaultVal();
        },
        (err) => {
          uni.showToast({
            title: '数据字典获取失败,稍后重试',
          });
        }
      );
    }else{
      this.updateDefaultVal();
    }
  },
  methods: {
    updateDefaultVal(){
      if (this.defaultUids) {
        this.selectedUids = this.defaultUids.split(',');
        this.selectedItems = [];
        this.options.forEach(o => this.selectedUids.includes(o.bcbCode) && this.selectedItems.push(o));
      }
    },
    // 选中
    handlerSelectItem(item) {
      if (this.selectedUids.includes(item.bcbCode)) {
        this.selectedItems = this.selectedItems.filter(it => it.bcbCode != item.bcbCode);
      } else {
        if(this.otherLogic == true && this.logicFun){
          this.selectedItems = this.logicFun(item, this.selectedItems);
        }else{
          this.selectedItems.push(item);
        }
      }
      this.selectedUids = [];
      this.selectedItems.forEach(it => this.selectedUids.push(it.bcbCode));
    },
    // 确认
    handlerConfirm() {
      this.$emit("select", this.selectedItems);
    },
  },
};
</script>
<style lang="scss" scoped>
.multi-page {
  padding: 10px;
  .nav-right-icon {
    color: #FFF;
    margin-right: 15px;
  }
  .u-checkbox-group {
    width: 100%;
  }
  .credit-container {
    height: 88rpx;
    border-bottom: 1px solid #e6e6e6;
    .info {
      display: flex;
      align-items: center;
      line-height: 100%;
      color: #999999;
      font-size: 12px;
      .info-item {
        background-color: #EFF3F9;
        border-radius: 5px;
        margin-right: 5px;
        padding: 5px 8px;
      }
    }
  }
  .title {
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>